<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
    .bg-purple-dark {
        background-image: url("../imgs/bb.jpg");
        background-repeat: no-repeat;
        background-size: 100% ;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 200px;
    }
    h1{
        font-size: 100px;
        position: absolute;
        left: 600px;
        overflow: hidden;

    }
    a {
        text-decoration: none;
        color: #666666;
    }
    .footer {
        margin: 0 auto;
        height: 415px;
        background-color: #f5f5f5;
        padding-top: 30px;
    }
</style>
<body>
<!--头部-->
<div style="width: 1200px;margin: 0 auto;background-color: #fff">
    <a href="/"><img src="../imgs/logo.png" style="width: 50px;margin-left: 50px;vertical-align: middle" alt="" ></a>
    <a href="index.html" style="margin-left: 130px">首页</a><el-divider direction="vertical"></el-divider>
    <a href="fashourili.html" style="margin-left: 50px">发售日历</a><el-divider direction="vertical"></el-divider>
    <a href="aboutus.html" style="margin-left: 50px">关于我们</a><el-divider direction="vertical"></el-divider>
    <a href="helloeui.html" style="margin-left: 50px">公告</a><el-divider direction="vertical"></el-divider>
    <a href="personal.html" style="margin-left: 50px">个人中心</a><el-divider direction="vertical"></el-divider>
    <span style="margin-left: 200px;"><a href="login.html">登录</a>
  |
    <a href="reg.html">注册</a></span>
</div>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
            <h1>公告</h1>
        </div></el-col>
    </el-row>
    <el-main style="width: 1200px;margin: 0 auto">
        <el-menu style="margin: 0 auto;width: 400px"
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect">
            <el-menu-item index="1">全部</el-menu-item>
            <el-menu-item index="2">新品</el-menu-item>
            <el-menu-item index="3">赋能</el-menu-item>
            <el-menu-item index="4">合成</el-menu-item>
            <el-menu-item index="5">活动</el-menu-item>
        </el-menu>
    <el-row gutter="20">
        <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
            <el-card>
                <img :src="p.url" width="100%" height="96px" alt="">
                <div>
                    <p style="font-size: 20px;height: 10px;margin-top: 0">
                        {{p.title}}</p>
                    <p style="font-size: 14px;color: #666;margin-top: 6px">
                        {{p.date}}
                    </p>
                </div>
            </el-card>
        </el-col>
    </el-row>
        <el-pagination style="margin: 0 auto;width: 400px"
                background
                layout="prev, pager, next"
                :total="100">
        </el-pagination>
    </el-main>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex: '1',
                productArr:[
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"},
                    {title:"衣服",date:"2022/10/23",url:"../static/imgs/bb.jpg"}
                ]
            }
        },
       methods:{
           handleClick(tab, event) {
               console.log(tab, event);
           },
           handleSelect(key, keyPath) {
               console.log(key, keyPath);
           }
       }
    })
</script>
</html>